<template>
  <el-row>
    <!--是否销账图标-->
    <el-tooltip
      content="全部销账"
      placement="bottom-start"
      effect="light"
      v-if="showGreen"
      class="margin-right-xs"
    >
      <img :src="xiaogreenPng" />
    </el-tooltip>
    <el-tooltip
      content="部分销账"
      placement="bottom-start"
      effect="light"
      v-if="showYellow"
      class="margin-right-xs"
    >
      <img :src="xiaoyellowPng" />
    </el-tooltip>
    <el-tooltip
      content="没有销账"
      placement="bottom-start"
      effect="light"
      v-if="showGray"
      class="margin-right-xs"
    >
      <img :src="xiaogreyPng" />
    </el-tooltip>
    <!-- 没有请求前-默认没有销账 -->
    <el-tooltip
      content="没有销账"
      placement="bottom-start"
      effect="light"
      v-if="defaults"
      class="margin-right-xs"
    >
      <img :src="xiaogreyPng" />
    </el-tooltip>
  </el-row>
</template>

<script>
  import xiaogreenPng from "@/assets/images/xiaogreen.png";
  import xiaoyellowPng from "@/assets/images/xiaoyellow.png";
  import xiaogreyPng from "@/assets/images/xiaogrey.png";

export default {
  props: ["data"],
  data() {
      return {
        xiaogreenPng: xiaogreenPng,
        xiaoyellowPng: xiaoyellowPng,
        xiaogreyPng: xiaogreyPng,
        defaults: true,
        showGreen: false,
        showYellow: false,
        showGray: false,
      };
  },

  methods: {
    /**
     * 未生成记账，显示“未销账”。
     * 已生成记账，按下列规则显示：
     * 待支付余额为0时，变成绿色，表示全部销账完毕。
     * 待支付余额小于总销账金额时，变成黄色，表示部分销账。
     * 待支付余额等于总销账金额时，变成灰色，表示未销账。
     * */
    showColor() {
      let obj = this.data;
      let totalOffAmount = obj.totalOffAmount;
      let toPayAmt = obj.toPayAmt;
      let isGenAccount = obj.isGenAccount;
      totalOffAmount = totalOffAmount == null ? 0 : totalOffAmount;
      toPayAmt = toPayAmt == null ? 0 : toPayAmt;
      if (isGenAccount == 0) {
        this.showGray = true;
      } else {
        if (toPayAmt == 0) {
          this.showGreen = true;
        } else if (toPayAmt < totalOffAmount) {
          this.showYellow = true;
        } else if (toPayAmt == totalOffAmount) {
          this.showGray = true;
        }
      }
      this.defaults = false;
    }
  },

  mounted() {
    this.showColor();
  }
};
</script>


<style>

</style>
